window.onload = function () {
    let bigImgs = document.querySelectorAll('.bigimg');
    let smallImgs = document.querySelectorAll('.smallimg');
    let nextBtn = document.querySelector('.next');
    let preBtn = document.querySelector('.pre');
    let baiyexings=this.document.querySelectorAll('.baiyexing')

    //全局变量 index : 当前被选中的图片索引
    let index = '';
    bigImgs[0].classList.add('big-show');
    smallImgs[0].classList.add('small-active');
    for (let i = 0; i < smallImgs.length; i++) {
        smallImgs[i].addEventListener('click', function () {
            for (let j = 0; j < smallImgs.length; j++) {
                bigImgs[j].classList.remove('big-show');
                smallImgs[j].classList.remove('small-active')
            }
            bigImgs[i].classList.add('big-show');
            smallImgs[i].classList.add('small-active');

            //更改全局变量index 
            index = i;
        


        })
    }
nextBtn.addEventListener('click',function(){
  
    if(index< smallImgs.length-1){
          index++;
    }else{
        index=3
    }
    for (let j = 0; j < smallImgs.length; j++) {
        bigImgs[j].classList.remove('big-show');
        smallImgs[j].classList.remove('small-active')
    }
    bigImgs[index].classList.add('big-show');
    smallImgs[index].classList.add('small-active');
})
preBtn.addEventListener('click',function(){
    
    if(index>0){
        index--;
  }else{
      index=0
  }
  for (let j = 0; j < smallImgs.length; j++) {
      bigImgs[j].classList.remove('big-show');
      smallImgs[j].classList.remove('small-active')
  }
  bigImgs[index].classList.add('big-show');
  smallImgs[index].classList.add('small-active');

})






for(let i=0;i<baiyexings.length;i++){
    baiyexings[i].addEventListener('mouseover',function(){
        baiyexings[i].classList.add('baiyexings');
      
    })
    baiyexings[i].addEventListener('mouseout',function(){
        baiyexings[i].classList.remove('baiyexings');
      
    })
    
}



}

